<!-- 通知公告详情 -->
<template>
    <view class="article-detail_container">
        <view class="bao">
            <view class="article-detail_head">
                <view class="title">{{ current.title }}</view>
                <view class="date">
                    <u-icon name="clock" color="#333333" size="28"></u-icon>
                    <text style="margin-left: 20rpx;margin-right: 20rpx;">{{ current.createTime }}</text>
                    <u-tag text="通知公告" plain size="mini" type="warning"></u-tag>
                </view>
                <view class="imgBao">
                    <img class="img" v-if="current.coverImage" :src='current.coverImage' alt="">
                </view>
            </view>
            <u-parse :content="current.content" @preview="preview" @navigate="navigate" />
        </view>

    </view>
</template>

<script>
import baseApi from "@/config/baseApi.js";
import { getNoticeDetails } from "@/api/data";
export default {
    name: "",
    components: {},
    data() {
        return {
            current: {},
            baseApi: baseApi,
        };
    },
    onLoad(query) {
        this.getDetails(query.id);
    },
    methods: {
        async getDetails(id) {
            const { data } = await getNoticeDetails(id);
            this.current = data;
            this.current.coverImage = 'http://127.0.0.1:4444/api/upload/' + data.coverImage;
            this.current.createTime = uni.$u.timeFormat(data.createTime, "yyyy-mm-dd");
        },
        preview(src, e) {
            console.log(src, e);
        },
        navigate(href, e) {
            console.log(href, e);
        },
    },
};
</script>
<style lang="scss" scoped>
.article-detail_container {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    .bao {
        overflow-y: scroll;
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
        padding: 30rpx 20rpx;
        border-radius: 30rpx;
        box-shadow: 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1), 0 8rpx 16rpx -8rpx rgba(0, 0, 0, 0.1);
    }

    .article-detail_head {
        width: 100%;

        .title {
            color: #000;
            font-size: 28rpx;
            margin-bottom: 16rpx;
            font-weight: 700;
            box-sizing: border-box;
        }

        .img {
            width: 100%;
            border-radius: 8rpx;
            margin-bottom: 10rpx;
            border: 2rpx solid #dedede;
        }

        .date {
            color: #666666;
            font-size: 24rpx;
            box-sizing: border-box;
            margin: 18rpx 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

    }
}
</style>